<template>
  <div class="find">
    <comheader
      pageTitle="发现"
      :isBack="false"></comheader>
    <div class="find-swiper">
      <swiper adPosition="3"></swiper>
    </div>
    <spliter :height="10"></spliter>

    <div class="find-navs">
      <ul>
        <li class="find-navs-left" @click="toProfitCompute">
          <img :src="navsData[0].img" :alt="navsData[0].title">
          <p>{{ navsData[0].title }}</p>
          <span>{{ navsData[0].des }}</span>
        </li> 
        <li class="find-navs-right" @click="toGreenHandRed">
          <img :src="navsData[1].img" :alt="navsData[1].title">
          <p>{{ navsData[1].title }}</p>
          <span>{{ navsData[1].des }}</span>
        </li>
 
      </ul>
    </div>
    <spliter :height="10"></spliter>

    <div class="find-content">
      <div class="find-content-header">
        <img :src="imgs[1]" alt="">
        <p>资讯中心</p>
        <img :src="imgs[0]" alt="">
      </div>

      <ul class="find-content-list">
        <li class="border-1px" v-for="article in articleList" @click="toAricle(article.uuid)">
          <p><strong>{{ article.categroie }}</strong>{{ article.title }}</p>
          <span class="icon-more"></span>
        </li>
        <div class="loadmore" @click="loadeMore">
          <p>{{ allLoaded ? '没有更多了哦~' : '查看更多' }}</p>
        </div>
      </ul>
    </div>

  </div>
</template>

<script>
  import swiper from 'components/common/swiper'
  import spliter from 'components/common/spliter'
  import comheader from 'components/common/comHead'

  export default {
    data () {
      return {
        numPerPage: 6,
        currentPage: 1,
        totalPage: null,
        allLoaded: false,
        navsData: [
          {
            img: require('assets/find_moni@2x.png'),
            title: '模拟收益',
            des: '模拟预算，收益早知道'
          },
          {
            img: require('assets/find_hongbao@2x.png'),
            title: '现金红包',
            des: '红包卡卷，投资更省钱'
          }
        ],
        articleList: [],
        imgs: [
          require('assets/find_left@2x.png'),
          require('assets/find_right@2x.png')
        ]
      }
    },
    computed: {
      articles () {
        const articles = []
        // 分割为种类和标题 ---> (【XXXX】)(XXXXXXXXXXXX)
        this.articleList.forEach((article) => {
          let categroie = article.title.match(/【\S+】/)[0]
          let title = article.title.split('】')[1]
          let uuid = article.uuid
          articles.push({
            categroie,
            title,
            uuid
          })
        })
        return articles
      },
      isLogin () {
        return !!this.$store.state.user.mobile
      }
    },
    methods: {
      loadeMore () {
        if (this.allLoaded) {
          return
        }
        this.$http.get(`/api/base/baseArticle/list?numPerPage=${this.numPerPage}&currentPage=${this.currentPage}`)
          .then((res) => {
            if (res.data.success) {
              res.data.data.list.forEach((article) => {
                this.articleList.push(article)
              })
              this.currentPage = res.data.data.currentPage
              this.totalPage = res.data.data.totalPage
              // 全部在家完成 allLoaded标记为true
              if (this.currentPage === this.totalPage) {
                this.allLoaded = true
                return
              }
              this.currentPage += 1
            }
          })
          .catch((err) => {
            alert('请检查您的网络!', err)
          })
      },
      toAricle (uuid) {
        this.$router.push(`/article/${uuid}`)
      },
      toProfitCompute () {
        this.$router.push('/profitCompute')
      },
      toGreenHandRed () {
        if (this.isLogin) {
          this.$router.push('/redCard?tab=1')
        } else {
          this.$router.push('/greenhandred')
        }
      }
    },
    created () {
      document.body.style.overflow = ''
      this.loadeMore()
    },
    components: {
      swiper,
      spliter,
      comheader
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/tool.scss';
  @import '../../common/scss/_variable.scss';

  .find {
    &-navs {
      padding: 60px 0;
      color: $base-333;
      text-align: center;
      ul {
        display: flex;
        justify-content: space-around;
        font-size: 0;
      }
      li {
        width: 50%;
        img {
          width: 100px;
          height: 100px;
        }
        p {
          font-size: 32px;
          line-height: 86px;
        }
        &:nth-child(1) {
          width: 50%;
          border-right: 1px solid $base-e5e5e5;
        }
      }
      span {
        font-size: 28px;
        color: #999;
      }
    }
    &-content {
      padding: 40px 30px 120px 30px;
      &-header {
        display: flex;
        margin-bottom: 40px;
        justify-content: center;
        align-items: center;
        p {
          font-size: 38px;
          color: $base-ff6c00;
          text-align: center;
          margin: 0 30px;
        }
        img {
          height: 1px;
          flex: 0 1 auto;
        }
      }
      &-list {
        li {
          height: 110px;
          display: flex;
          @include border-1px(#{$base-e5e5e5});
          line-height: 110px;
          p {
            font-size: 31px;
            white-space: nowrap;
            text-overflow: ellipsis;
            padding-right: 30px;
            overflow: hidden;
            flex: 1;
            strong {
              color: $base-ff3131;
            }
          }
          span {
            font-size: 30px;
            color: $base-999;
            line-height: 110px;
          }
        }
        li:nth-last-child(2) {
          border: none;
        }
        .loadmore {
          padding-top: 40px;
          p {
            font-size: 30px;
            text-align: center;
            color: $base-666;
          }
        }
      }
    }
  }
</style>
